<!-- 指定车牌提醒配置 -->
<template>
  <div class="common-body-wrapper">
    <search-header
      single-width="130"
      :searchList="searchList"
      @changeHeight="toRetTable"
      @confirmSearch="toSearch"
      :isNeedTree="true"
      :isCheckbox="true"
      :paramName="paramName"
      @setSelectedNode="setSelectedNode"
    ></search-header>
    <div class="common-table-tree-wrapper">
      <div class="common-table-wrapper">
        <multi-fun-table
          :sortColumn="notFormatColumn"
          :orderType="sortType"
          :fixed-cols="fixedCols"
          :is-reset-table="isResetTable"
          :theads-info="theadsInfo"
          :tbodys-info="tbodysInfo"
          @handleMultiCheck="handleMultiCheck"
          @handleSortColumn="handleSortColumn"
          @searchFn="getList"
          @getNextPage="getNextPage"
        >
          <div class="operate-btn-group" slot="operateBtnGroup">
            <a
              class="ake_btn ake_btn_text"
              v-if="isPermmited('PARK_EMERGENCY_CARNO:NEW')"
              @click.prevent="addCarNo()"
            >新增</a>
            <a
              class="ake_btn ake_btn_text"
              v-if="isPermmited('PARK_EMERGENCY_CARNO:EXPORT')"
              @click.prevent="exportData()"
            >导出</a>
            <a
              class="ake_btn ake_btn_text"
              v-if="isPermmited('PARK_EMERGENCY_CARNO:EMERGENCY_CONFIG:LIST')"
              @click.prevent="openEmergencySetup()"
            >告警设置</a>
          </div>
          <template slot="tdCell" slot-scope="props">
            <el-table-column
              :fixed="props.fixed"
              :label="props.label"
              :min-width="props.minWidth"
              :width="props.width"
              :prop="props.prop"
              :sortable="props.sortable"
            >
              <template slot-scope="scope">
                <span v-if="'reno' == props.prop">{{scope.$index+1}}</span>
                <span v-else>{{ scope.row[props.prop] }}</span>
              </template>
            </el-table-column>
          </template>

          <!--操作列内的按钮-->
          <template slot="operateCell" slot-scope="props">
            <el-table-column
              :fixed="props.fixed"
              :label="props.label"
              width="100"
              class-name="operateCell"
            >
              <template slot-scope="scope">
                <el-button
                  title="修改"
                  size="small"
                  type="primary"
                  icon="icon-edit"
                  class="ake-icon-font"
                  v-if="isPermmited('PARK_EMERGENCY_CARNO:UPDATE')"
                  @click="updateCarNo(scope.row)"
                  plain
                ></el-button>
                <el-button
                  title="删除"
                  size="small"
                  type="danger"
                  icon="icon-delete"
                  class="ake-icon-font"
                  v-if="isPermmited('PARK_EMERGENCY_CARNO:DELETE')"
                  @click="showDeleteCarNo(scope.row.id)"
                  plain
                ></el-button>
              </template>
            </el-table-column>
          </template>
        </multi-fun-table>

        <table-pagination :size="total" :cur-page="pageNumber" @backData="getPagination"></table-pagination>
      </div>
    </div>

    <basic-modal ref="delConfirmTipModal" bodyTxt="确认删除吗？">
      <h3 slot="title">温馨提示</h3>
      <div class="modal-footer" slot="modal-footer">
        <button class="ake_btn ake_btn_text ake_btn_confirm" @click="deleteCarNo()">确定</button>
        <button class="ake_btn ake_btn_text modal-close" @click="closed('delConfirmTipModal')">关闭</button>
      </div>
    </basic-modal>

    <basic-modal ref="carNoModal" width="510" static="true">
      <h3 slot="title">指定车牌录入</h3>
      <div class="modal-body" slot="modal-body">
        <el-form
          ref="carNoForm"
          :model="carNoVo"
          :rules="rules"
          label-position="left"
          label-width="80px"
          style="width: 400px"
        >
          <el-form-item prop="carCode" label="车牌号码">
            <el-input v-model="carNoVo.carCode" placeholder="请输入车牌号码"></el-input>
          </el-form-item>
          <el-form-item prop="mobile" label="车主电话">
            <el-input v-model="carNoVo.mobile" placeholder="请输入购买人的手机号码"></el-input>
          </el-form-item>
          <el-form-item prop="parkIds" label="停车场">
            <div class="el-form--inline">
              <template v-if="selectedParkingLot.length">
                <el-tooltip placement="bottom-start">
                  <div slot="content">
                    <ul class="selectParkingLotTree">
                      <li
                        v-for="item in selectedParkingLot"
                        style="margin-bottom: 4px; font-size: 12px;"
                      >{{ item }}</li>
                    </ul>
                  </div>
                  <div class="selected-parkingLot">{{selectedParkingLotStr}}</div>
                </el-tooltip>
              </template>

              <div v-if="!selectedParkingLot.length" class="selected-parkingLot grayTip">未选择任何停车场</div>

              <el-button
                size="small"
                type="primary"
                @click="openSelectParkModal"
                class="select-park-btn ake_btn_text"
              >选择停车场</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button class="ake_btn ake_btn_text ake_btn_confirm" @click.stop="submitCarNoForm()">确认</button>
        <button class="ake_btn ake_btn_text modal-close" @click="closed('carNoModal')">取消</button>
      </div>
    </basic-modal>

    <!-- 告警设置 -->
    <el-dialog
      title="告警设置-指定车牌"
      :visible.sync="dialogVisibleForEmergency"
      width="320px"
      class="zb-dialog"
    >
      <div class="parkinglot-showInfo-content main-content-box" style="padding: 0 30px">
        <div class="title-chunk" style="display: flex">
          <h3>告警提醒</h3>
          <el-tooltip class="item" effect="dark" content="告警提醒通过公众号推送到管理员" placement="right">
            <i class="el-icon-question" style="margin-left: 10px;font-size: 20px;"></i>
          </el-tooltip>
        </div>
        <div class="switch-btn">
          <span>进场告警</span>
          <el-switch v-model="cardNoIn" active-color="#548cd1" inactive-color="#DEDEDE"></el-switch>
        </div>
        <div class="switch-btn">
          <span>出场告警</span>
          <el-switch v-model="cardNoOut" active-color="#548cd1" inactive-color="#DEDEDE"></el-switch>
        </div>
        <h3 style="margin-top:40px;">POS机管理员告警提醒</h3>
        <p class="red-tip">管理员需登录才能收到告警提醒</p>
        <div class="switch-btn">
          <span>进场告警</span>
          <el-switch v-model="pos_cardNoIn" active-color="#548cd1" inactive-color="#DEDEDE"></el-switch>
        </div>
        <div class="switch-btn">
          <span>出场告警</span>
          <el-switch v-model="pos_cardNoOut" active-color="#548cd1" inactive-color="#DEDEDE"></el-switch>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="medium" @click="saveEmergencySetup()">保 存</el-button>
        <el-button size="medium" plain @click="dialogVisibleForEmergency = false">取 消</el-button>
      </span>
    </el-dialog>

    <!--选择停车场树-->
    <basic-modal ref="selectParkModal" width="400" customeClass="select-park-modal" static="true">
      <h3 slot="title">选择停车场</h3>
      <div class="modal-body" slot="modal-body">
        <div class="common-tree modal-tree-box">
          <ul id="ParkTree" name="ParkTree" class="ztree"></ul>
        </div>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button
          type="button"
          class="ake_btn ake_btn_text ake_btn_confirm"
          @click="selectParkSure()"
        >确认</button>
        <button class="ake_btn ake_btn_text modal-close" @click="closed('selectParkModal')">取消</button>
      </div>
    </basic-modal>
  </div>
</template>

<script>
import common from "@mixins/common.js";
import stardardList from "@mixins/tables/stardardList.js";

//modal
import invokeModal from "@mixins/modal/invokeModal.js";

// 引进vue的js
import emergency_carno from "./js/emergency_carno.js";

export default {
  name: "emergencyCarno",
  mixins: [common, stardardList, invokeModal, emergency_carno],
  data() {
    return {
      paramName: "parkIds",
      fixedCols: 3,
      total: 0,
      searchList: [
        {
          index: 0,
          isShow: false,
          type: "text",
          name: "carCode",
          text: "车牌号码",
          value: ""
        },
        {
          index: 1,
          isShow: false,
          type: "text",
          name: "mobile",
          text: "车主电话",
          value: ""
        },
        {
          index: 2,
          isShow: false,
          type: "text",
          name: "createBy",
          text: "添加人",
          value: ""
        },
        {
          index: 3,
          isShow: false,
          type: "datePicker",
          name: "query_time",
          text: "添加时间",
          propName: "createTimeFrom,createTimeTo",
          value: "",
          style: {
            width: "360px"
          }
        }
      ],
      theadsInfo: [
        {
          index: 0,
          isShow: false,
          prop: "reno",
          text: "序号",
          width: 68
        },
        {
          index: 1,
          isShow: false,
          prop: "carCode",
          text: "车牌号码",
          minWidth: 60
        },
        {
          index: 2,
          isShow: false,
          prop: "mobile",
          text: "车主电话",
          minWidth: 70
        },
        {
          index: 3,
          isShow: false,
          prop: "parkNameListStr",
          text: "停车场"
        },
        {
          index: 4,
          isShow: false,
          prop: "createTime",
          text: "添加时间",
          minWidth: 120
        },
        {
          index: 5,
          isShow: false,
          prop: "createBy",
          text: "添加人",
          minWidth: 60
        }
      ],
      tbodysInfo: []
    };
  },
  methods: {}
};
</script>

<style lang="less" scoped>
@import "../../assets/less/manage.less";

.main-content-box {
  .red-tip {
    font-size: 12px;
    color: #de0000;
    margin-top: 10px;
  }

  h3 {
    font-size: 14px;
    color: #474747;
  }

  .switch-btn {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;

    > span {
      font-size: 14px;
      color: #666666;
    }
  }
}

.title-chunk {
  position: relative;
}
</style>
